<template>
    <!-- 体检项目 组件 -->
    <div>
        <el-table :data="tableData" :span-method="arraySpanMethod" :row-class-name="tableRowClassName" border :row-style="{height:'80px'}" >
          <el-table-column prop="type" label="项目名称" width="800" align="center"></el-table-column>
          <el-table-column prop="mark" label="项目介绍" align="center"  width="800"></el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
  name: 'Package',
  data () {
    return {
      id: 0,
      fix: true,
      tableData: []
    }
  },
  methods: {
    // 查询体检项目类型
    initProType: function () {
      const loading = this.$loading({
        lock: true,
        text: '正在努力加载',
        spinner: 'el-icon-loading',
        background: 'rgb(255, 255, 255)'
      })
      this.$axios.post(`/api/BespeakPojectType/${this.id}`).then(result => {
        // 查询体检项目
        this.$axios.post(`/api/BespeakPojectType/ProjectType/${this.id}`).then(results => {
          result.data.forEach((item, index) => {
            this.tableData.push({id: item.besProTypeId, type: item.besProTypeName})
            results.data.forEach((items, index) => {
              if (item.besProTypeId === items.besProTypeId) {
                this.tableData.push({type: items.besProName, mark: items.besProDesc})
              }
            })
          })
          loading.close()
        })
      })
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (row.id <= 11) {
        if (columnIndex === 0) {
          return [1, 3]
        } else if (columnIndex === 1) {
          return [0, 0]
        }
      }
    },
    tableRowClassName ({row, rowIndex}) {
      if (row.id <= 11) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    setCurrent (row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange (val) {
      this.currentRow = val
    }
  },
  created () {
    this.id = this.$route.params.id
    this.initProType()
    this.tableData.forEach((item, index) => {
      if (item.mark === '') {
        item.mark = '无'
      }
    })
  }
}
</script>

<style>
.el-table .warning-row {
    background: WhiteSmoke  ;
    color: DeepSkyBlue ;
    font-size: 25px;
    font-family: '楷体';
  }
</style>
